<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>06-v-bind的使用</title>
  <script src="./js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 标签间才可以使用插件表达式，插件表达式中是可以写简单的运算 -->
    <p>{{msg}}</p>
    <a href="http://www.baidu.com">百度</a>
    <!-- 如果标签的属性值需要用到data中的属性值的话，需要将当前的属性变成活动属性，也就是说这个属性中的值将来是需要进行替换的 -->
    <a v-bind:href="href">{{siteName}}</a>
    <a :href="href">{{siteName}}</a>
    <p>年龄:{{age + 1}}</p>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello World',
        age:20,
        title:'这是一个普通的标题',
        href:'http://www.baidu.com',
        siteName:'百度'
      }
    })
  </script>
</body>
</html>